<template>
    <div class="login_box">
        <div class="login_info">
            <div class="titles">登录用户</div>
            <div class="input_box"><input v-model="phone" placeholder="手机号"/></div>
            <div class="input_box"><input @keydown.enter="Login" type="password" v-model="password" placeholder="输入密码"/></div>
            <div class="btn_box" @click="Login">登 录</div>
            <div class="tips_login">
                <span @click="goForgetPassword">忘记密码</span>
                <span @click="goRegister">注册账号</span>
            </div>
        </div>
    </div>
</template>

<script>
    import {userLogin} from "@/api/apis";

    export default {
        name: "login",
        data() {
            return {
                phone: '',
                password: ''
            }
        },
        methods: {
            goForgetPassword() {
                this.$router.push({name: 'forgetpass'});
            },
            goRegister() {
                this.$router.push({name: 'register'});
            },
            Login() {
                let data = {
                    phone: this.phone,
                    password: this.password,
                }
                userLogin(data).then(res => {
                    window.localStorage.setItem('token', res.data.token)
                    this.$message.success('登录成功')
                    setTimeout(() => {
                        this.$store.commit('GetUserInfo');
                        var isIE = false;
                        if (window.navigator.appName.indexOf("Microsoft") != -1) {
                            isIE = true;
                        }
                        this.$router.push({
                            name: 'home'
                        });
                        // if (isIE && (window.navigator.userProfile + '') == 'null') {
                        //     window.location.href = "/";
                        // } else {
                        //     this.$router.back();
                        // }
                    }, 500)
                })
            }
        }
    }
</script>

<style scoped lang="less">
    .login_box {
        min-height: 100vh;
        /*display: flex;*/
        /*align-items: center;*/
        cursor: pointer;
        background-image: url("../../assets/login-bg@2x.png");
        position: relative;
        background-size: cover;
        
        .login_info {
            width: 480px;
            padding: 63px 0 59px;
            background: #FFFFFF;
            border: 1px solid #9D9D9D;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            
            .titles {
                text-align: center;
                font-size: 20px;
                font-family: Microsoft YaHei;
                font-weight: bold;
                color: #000000;
                margin-bottom: 40px;
            }
            
            .input_box {
                text-align: center;
                
                input {
                    background: #FFFFFF;
                    border: 1px solid #C7C7C7;
                    height: 42px;
                    padding: 0 20px;
                    width: 300px;
                    font-size: 14px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    line-height: 19px;
                    color: #9D9D9D;
                    opacity: 1;
                    box-sizing: border-box;
                    margin-bottom: 20px;
                }
            }
            
            .btn_box {
                width: 300px;
                height: 42px;
                background: #B11E24;
                font-size: 16px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                line-height: 42px;
                color: #FFFFFF;
                text-align: center;
                margin: 20px auto;
            }
            
            .tips_login {
                width: 300px;
                margin: 0 auto;
                display: flex;
                justify-content: space-between;
                
                span {
                    font-size: 14px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #000000;
                }
            }
        }
    }
</style>
